<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-11 18:09:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-12 14:08:55
 * @FilePath: \cip-mobile\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 创建单位页 -->
<script lang="ts" setup>
import type { FireInspectionPerson } from '@/genapi/fireProduct';
import { fireProductFireApiInspectionPersonJobQuerybyPost } from '@/genapi/fireProduct';
import { whManagerBsTbEnterpriseGetPageUsingPost } from '@/genapi/wh';
import { useUserStore } from '@/stores/user';
defineOptions({ name: 'Login' });
const userStore = useUserStore();

const { execute, isLoading } = useAsyncState(
	async () => {
		await userStore.login(form.value);
	},
	undefined,
	{
		immediate: false,
	},
);
const router = useRouter();

const form = ref({
	name: '',
	type: '',
	relationship: '',
	director: '',
	phone: '',
	level: '',
	email: '',
	address: '',
	validity: '',
	annex: [],
});

const back = () => {
	router.replace({ path: '/login/register' });
};

const unitColumns = ref([
	{ text: '承包商', value: '承包商' },
	{ text: '供应商', value: '供应商' },
	{ text: '第三方服务机构', value: '第三方服务机构' },
	// { text: '北京', value: 'Beijing' },
	// { text: '连云港', value: 'Lianyungang' },
	// { text: '长沙', value: 'Changsha' },
	// { text: '武汉', value: 'Wuhan' },
]);
const QualificationLevel = ref([
  { text: '特级资质', value: '特级资质' },
  { text: '一级资质', value: '一级资质' },
  { text: '二级资质', value: '二级资质' },
  { text: '三级资质', value: '三级资质' },
])

const showPopup1 = ref(false);
const showPopup2 = ref(false);
const showPopup3 = ref(false);
const showPopup4 = ref(false);

const confirm = ({ selectedValue, selectedOptions }, title) => {
	form.value[title] = selectedValue[0];
	showPopup1.value = false;
	showPopup2.value = false;
	showPopup3.value = false;
	showPopup4.value = false;
};

const rules = ref({
	name: [{ required: true, message: '请填写单位名称' }],
	type: [{ required: true, message: '请选择单位类别' }],
	relationship: [{ required: true, message: '请选择关联企业' }],
	director: [{ required: true, message: '请填写主要负责人' }],
	phone: [{ required: true, message: '请填写联系电话' }],
	level: [{ required: true, message: '请选择资质等级' }],
	email: [{ required: true, message: '请填写企业邮箱' }],
	address: [{ required: true, message: '请填写单位地址' }],
	validity: [{ required: true, message: '请选择资质有效期' }],
	annex: [],
});
</script>

<template>
	<div class="create-unit-page">
		<nut-navbar title="新建单位" left-show @click-back="back"></nut-navbar>
		<nut-form ref="formRef" :model-value="form" :rules="rules">
			<nut-form-item>
				<div class="basedata-form-title">单位基本信息</div>
			</nut-form-item>
			<nut-form-item prop="name" label="单位名称">
				<nut-input v-model="form.name" placeholder="请输入" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item prop="type" label="单位类别">
				<div class="selector-box" @click="showPopup1 = true">
					{{ form.type }}<span v-if="!form.type">请选择</span
					><IconFont name="rect-right" color="#a9a7a7"></IconFont>
				</div>
				<nut-popup v-model:visible="showPopup1" position="bottom">
					<nut-picker
						@confirm="(params) => confirm(params, 'type')"
						:columns="unitColumns"
						title="请选择单位类别"
						@cancel="showPopup1 = false"
					/>
				</nut-popup>
			</nut-form-item>
			<nut-form-item prop="relationship" label="关联企业">
				<div class="selector-box" @click="showPopup2 = true">
					{{ form.relationship }}<span v-if="!form.relationship">请选择</span
					><IconFont name="rect-right" color="#a9a7a7"></IconFont>
				</div>
				<nut-popup v-model:visible="showPopup2" position="bottom">
					<nut-picker
						@confirm="(params) => confirm(params, 'relationship')"
						:columns="unitColumns"
						title="请选择关联企业"
						@cancel="showPopup2 = false"
					/>
				</nut-popup>
			</nut-form-item>
			<nut-form-item prop="director" label="主要负责人">
				<nut-input v-model="form.director" placeholder="请输入" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item prop="phone" label="联系电话">
				<nut-input v-model="form.phone" placeholder="请输入" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item prop="level" label="资质等级">
				<div class="selector-box" @click="showPopup3 = true">
					{{ form.level }}<span v-if="!form.level">请选择</span
					><IconFont name="rect-right" color="#a9a7a7"></IconFont>
				</div>
				<nut-popup v-model:visible="showPopup3" position="bottom">
					<nut-picker
						@confirm="(params) => confirm(params, 'level')"
						:columns="QualificationLevel"
						title="请选择资质等级"
						@cancel="showPopup3 = false"
					/>
				</nut-popup>
			</nut-form-item>
			<nut-form-item prop="email" label="企业邮箱">
				<nut-input v-model="form.email" placeholder="请输入" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item prop="address" label="单位地址">
				<nut-input v-model="form.address" placeholder="请输入" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item prop="validity" label="资质有效期">
				<!-- <nut-cell
					class="select-box"
					title="请选择"
					:desc="String(form.validity)"
					@click="showPopup4 = true"
				></nut-cell> -->
				<div class="selector-box" @click="showPopup4 = true">
					{{ form.validity }}<span v-if="!form.validity">请选择</span
					><IconFont name="rect-right" color="#a9a7a7"></IconFont>
				</div>
				<nut-popup v-model:visible="showPopup4" position="bottom">
					<nut-picker
						@confirm="(params) => confirm(params, 'validity')"
						:columns="unitColumns"
						title="请选择资质有效期"
						@cancel="showPopup4 = false"
					/>
				</nut-popup>
			</nut-form-item>
			<nut-form-item>
				<div class="validity-upload-title">上传资质<span>（营业执照，资质证明等）</span></div>
				<nut-uploader class="validity-uploader" url="https://xxxx" multiple maximum="3"></nut-uploader>
			</nut-form-item>
			<nut-form-item>
				<nut-button block class="create-unit-submit-button" :loading="isLoading" @click="execute">
					提交审核
				</nut-button>
			</nut-form-item>
		</nut-form>
	</div>
</template>

<style scoped lang="scss">
.create-unit-page {
	display: flex;
	flex-direction: column;
	width: 100vw;
	--nut-cell-color: #000;
	--nut-cell-box-shadow: 0;
	--nut-form-item-label-font-size: 12px;
	--nut-input-border-bottom: #588bff 1px;
	--nut-checkbox-label-color: #606266;
	--nut-checkbox-label-font-size: 12px;
	--nut-primary-color: #165dff;
	--nut-input-font-size: 12px;
	--nut-navbar-title-font: 16px;
	--nut-icon-line-height: 20px;
	.nut-form {
		.nut-form-item {
			margin-bottom: 5px;
			border-bottom: 1px solid #e3e4e5;
		}
		.validity-upload-title {
			font-size: 14px;
			color: #000;
			span {
				font-size: 12px;
				color: #909399;
			}
		}
		.validity-uploader {
			margin-top: 20px;
		}
		.selector-box {
			color: #000;
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			span {
				color: #929292;
			}
		}
		.basedata-form-title {
			font-size: 14px;
			color: #000;
		}
	}
	.create-unit-submit-button {
		height: 35px;
		font-size: 14px;
		color: #fff;
		background: #165dff;
		border: 1px solid #034196;
		border-radius: 16px;
	}
}
</style>
